<script context="module">
	let totalComponents = 0;

	// 此处允许执行import操作，例如
	// `import Example, { alertTotal } from './Example.svelte'`
	export function alertTotal() {
		alert(totalComponents);
	}
</script>

<script>
	let count = 0;
	let clickable = false;
	// $: clickablea;
	totalComponents += 1;
	console.log(`total number of times this component has been created: ${totalComponents}`);
	console.log(clickable);
	let counter = 0;
	function increment() {
		counter = counter + 1;
	}

	function track(event) {
		// trackEvent(event);
		console.log(event);
	}
</script>

<div
	class="grid items-center justify-center w-full p-10 text-purple-400 bg-gray-200"
	on:click={alertTotal}
>
	{totalComponents}
</div>
<div class="p-8 text-center">
	<button
		class="grid items-center justify-center h-12 px-5 my-5 text-purple-400 bg-gray-200"
		disabled
	>
		can't touch this
	</button>
	<input type="checkbox" bind:checked={clickable} />
	{#if clickable}{clickable}{:else}{clickable}{/if}
</div>
<button on:click={() => (count += 1)}>count: {count}</button>
<button class="m-6" on:click>The component itself will emit the click event</button>
<button on:click={increment} on:click={track}>Click me!</button>
